<template>
	<view class="ListOfPatients">
		<view class="ListOfPatients_All">
			<view class="ListOfPatients_Alllist">
				<Head class="Headclass" v-if="num" :num="num" :options="options"
					:examinationTypeIndex="examinationTypeIndex" @hedafun="hedafun"></Head>
				<Head v-else class="Headclass"></Head>
				<view class="ListOfPatients_TP">
					<view class="ListOfPatients_tab">
						<view :class="['tab-item', TabsValue==index ?'active':'']" v-for="(item,index) in list1"
							:key="index" @tap="getTabsClick(item,index)">
							{{item.name}}
						</view>
					</view>
					<u-radio-group v-if="activeList" v-model="value" placement="row" activeColor="#7AD9DF !important"
						inactiveColor="#B0E9EC  !important">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange(item.name,'医嘱查询')"
							:class="value==item.name?'clao':'clat'">
						</u-radio>
					</u-radio-group>
					<u-radio-group v-if="activeTwoList" v-model="value" placement="row" activeColor="#7AD9DF !important"
						inactiveColor="#B0E9EC  !important">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist2" :key="index"
							:label="item.name" :name="item.name" @change="radioChange(item.name,'执行记录')"
							:class="value==item.name?'clao':'clat'">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<component :is="currentView" :list="list" @reportFun="reportFun"></component>
		</view>
		<Report :show2="show" :reportObj="reportObj" @cancelTails="cancelTails" @StopMedicalit="StopMedicalit"></Report>
			<suspension-ball :isShow="false" @tap.native="jampBall"></suspension-ball>
	</view>
</template>

<script>
	import Select from './selevt.vue'
	import Report from './details.vue'
	import Head from '../../components/html/head.vue'
	import yizhu from '../../components/html/doctorisOrder.vue'
	import zixin from '../../components/html/implement.vue'
	import suspensionBall from '../../components/html/xuanfuqiu.vue'
	import {
		SearchYZ,
		EMR_Nursing_OrderdoList
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Select,
			Report,
			Head,
			yizhu,
			zixin,
			suspensionBall
		},
		data() {
			return {
				show: false,
				num: false,
				form: {
					name: '',
				},
				list1: [{
					name: '医嘱查询',
				}, {
					name: '执行记录',
				}],
				radiolist1: [{
						name: '药物',
						disabled: false,
					},
					{
						name: '检验检查',
						disabled: false,
					},
					{
						name: '全部',
						disabled: false,
					}
				],
				radiolist2: [{
						name: '药物',
						disabled: false,
					},
					{
						name: '其它',
						disabled: false,
					},
					{
						name: '全部',
						disabled: false,
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '药物',
				value1: '',
				TabList: '医嘱查询',
				activeList: false,
				activeTwoList: false,
				user: {},
				obj: {},
				listilt: [],
				listArry: [],
				options: [{
					value: "1",
					label: "今天"
				}, {
					value: "2",
					label: "三日内"
				}, {
					value: "3",
					label: "一周内"
				}, {
					value: "4",
					label: "全部",
					// disabled: true
				}],
				examinationTypeIndex: 1,
				type: '今天',
				reportObj: {},
				pageReady: false,
				TabsValue: 0,
				currentView: 'yizhu',
				list: []
			};
		},
		watch: {
			deleteObj: {
				// deep: true,
				handler(newval) {
					// console.log(newval);
					if (this.activeList) {
						this.SearchYZFun()
					} else {
						this.EMR_Nursing_OrderdoListFun()
					}
				},
			}
		},
		computed: {
			...mapState('user', ["userInfo", "deleteObj"]),
		},
		// mounted() {
		// 	this.SearchYZFun()
		// },
		onLoad() {
			this.activeList = true
			// this.SearchYZFun()
		},
		filters: {
			//文字数超出时，超出部分使用...
			ellipsis(value) {
				if (!value) return ''
				if (value.length > 10) {
					return value.slice(0, 10) + '...'
				}
				return value
			}
		},
		onBackPress(options) {
		 // this.set_siveShow(false)
		},
		methods: {
			...mapMutations("user", ["set_siveShow"]),
			jampBall() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			radioChange(name, e) {
				this.value = name
				if (e == '医嘱查询') {
					this.SearchYZFun()
				} else {
					this.EMR_Nursing_OrderdoListFun()
				}
			},
			getTabsClick(item, value) {
				this.TabsValue = value
				this.TabList = item.name
				if (this.TabList == '医嘱查询') {
					// this.value = this.value=='其他'?'检验检查' :this.value
					this.SearchYZFun()
					this.num = false
					this.activeList = true
					this.activeTwoList = false
					this.currentView = 'yizhu'
				} else {
					// this.value = this.value=='检验检查'?'其他' :this.value
					// this.radioChange(this.value,this.TabList)
					this.EMR_Nursing_OrderdoListFun()
					this.num = true
					this.activeList = false
					this.activeTwoList = true
					this.currentView = 'zixin'
				}
			},
			StopMedicalit() {
				this.SearchYZFun()
			},
			cancelTails(data) {
				this.show = data
			},
			async SearchYZFun() {
				this.value = this.value == '其它' ? '检验检查' : this.value
				//滚动回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
				});
				try {
					uni.showLoading({
						title: '加载中...', //显示的文字
						// duration: 5000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					this.user = uni.getStorageSync('userInfo')
					this.obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: this.user.hoscode,
						mrn: this.obj.MRN,
						series: this.obj.SERIES,
						kind: this.value,
						type: '未停医嘱',
						sOperdept: this.user.HosKind,
						sOperJp: this.user.sPassword
					}
					const res = await this.$http.SearchYZ(data)
					if (res) {
						console.log(res);
						if (res[0].result == '') {
							this.list = []
							uni.hideLoading();
							return
						}
						let a = this.alpha_sort(res)
						a.sort((q, w) => {
							return q.children[0].setno < w.children[0].setno ? 1 : -1;
						})
						this.list = a.map(item => {
							return {
								children: item.children.map(el => {
									return {
										...el,
										petypeTiele: el.prtype == 'BDS' || el.prtype == 'BDT' ? '血' :
											el.specialflag == '8' ? '化' :
											// el.phexeflag == '1' ? '★' :
											''
									}
								})
							}
						})
						console.log(this.list);
						this.$nextTick(() => {
							setTimeout(() => {
								uni.hideLoading();
							}, 500);
						})
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			alpha_sort(target) {
				let obj = {},
					result = [];
				target.map((item) => {
					let key = item.setno;
					//如果有这个key，就push一个对象
					if (obj[key]) {
						obj[key].push(item);
						//如果没有这个key，就把对象设置成数组格式（方便后面push进去）
					} else {
						obj[key] = [item];
					}
				});
				//根据obj中有几个对象，挨个push进去，组成最后的数组
				for (const key in obj) {
					const element = obj[key];
					if (element.length > 1) {
						let children = this.mapArray(element)
						result.push({
							children: children[0]
						});
					} else {
						result.push({
							children: element
						});
					}
				}
				return result;
			},
			//处理数组的方法
			mapArray(target) {
				let obj = {},
					result = [];
				target.map((item) => {
					let key = item.dr;
					//如果有这个key，就push一个对象
					if (obj[key]) {
						obj[key].push(item);
						//如果没有这个key，就把对象设置成数组格式（方便后面push进去）
					} else {
						obj[key] = [item];
					}
				});
				//根据obj中有几个对象，挨个push进去，组成最后的数组
				for (const key in obj) {
					const element = obj[key];
					result.push(element);
				}
				return result;
			},
			reportFun(data) {
				this.show = true
				this.reportObj = data
			},
			async EMR_Nursing_OrderdoListFun() {
				this.value = this.value == '检验检查' ? '其它' : this.value
				try {
					uni.showToast({
						title: '加载中...', //显示的文字
						// duration: 3000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					this.user = uni.getStorageSync('userInfo')
					this.obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: this.user.hoscode,
						mrn: this.obj.MRN,
						series: this.obj.SERIES,
						sKind: this.value,
						type: this.type
					}
					const res = await this.$http.EMR_Nursing_OrderdoList(data)
					if (res) {
						let a = this.alpha_sort(res)
						a.sort((q, w) => {
							return q.children[0].dodate > w.children[0].dodate ? 1 : -1;
						})
						console.log(a);
						this.list = a
						uni.hideToast();
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			hedafun(e) {
				this.type = e;
				this.EMR_Nursing_OrderdoListFun()
			}
		}
	};
</script>

<style scoped lang="scss">
	.Headclass {}

	.ListOfPatients {
		width: 100%;
		height: 100%;
		background: #F9F9F9;
		position: relative;

		.ListOfPatients_All {
			background: #F9F9F9;
			width: 100%;
			padding-top: 190px;
			// min-height: 100vh;

			.ListOfPatients_Alllist {
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 99;
			}
		}

		.ListOfPatients_TP {
			padding: 10px 0px 0px 0px;
			background: #FFFFFF;
			z-index: 9;

			// display: flex;
			// justify-content: space-between;
			.ListOfPatients_tab {
				display: flex;

				.tab-item {
					flex-shrink: 0;
					padding: 0 0 24rpx 0;
					position: relative;
					transition: all 0.2s linear;
					width: 50%;
					text-align: center;
					color: #1d8e95;

					&::after {
						transition: all 0.2s linear;
						transform: translateX(-50%) scaleX(0);
						content: '';
						width: 100%;
						position: absolute;
						left: 50%;
						bottom: 10rpx;
						border-bottom: 6rpx solid #7AD9DF;
						border-radius: 4rpx;
					}

					&.active {
						color: #21767b;
						font-weight: bold;

						&::after {
							content: '';
							width: 100%;
							position: absolute;
							left: 50%;
							transform: translateX(-50%) scaleX(1);
							bottom: 10rpx;
							border-bottom: 6rpx solid #7AD9DF;
						}
					}
				}
			}

		}

		.ListOfPatients_BT {
			// width: 100%;
			// height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			// padding-top: 10px;
			padding: 10px 10px;
			// margin-top: 166px;
			padding-bottom: 0px;

			.ListOfPatientsBT_item {
				width: 100%;
				min-height: 50px;
				background: #B0E9EC;
				border-radius: 6px;
				padding-bottom: 17px;
				position: relative;


				.ListOfPatientsBTItem_text {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FF4D65;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_textT {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #333333;
					line-height: 24px;
				}

				.ListOfPatientsBTItem_Right {
					width: 164px;
					height: 30px;
					// background: #FFFFCF ;
					// border-bottom-left-radius: 404rpx;
					// background-image: url("../../assets/image/sjd.png");
					// background-size: 104% 115%;
					// background-repeat: no-repeat;
					text-align: right;
					line-height: 30px;
					z-index: 1;
				}

				.Iage {
					width: 54% !important;
					height: 42% !important;
					position: absolute;
					top: 0;
					right: 0;
					background-size: auto !important;
					background-position: 100% 0% !important;
				}
			}

			.ListOfPatientsBT_itemTwo {
				width: 100%;
				min-height: 50px;
				background: #B0E9EC;
				border-radius: 6px;
				position: relative;
				// display: flex;
				// justify-content: space-between;

				.ListOfPatientsBT_itemTwo_left {
					// width: 190px;
					// min-height: 50px;
					line-height: 50px;
					display: flex;
					padding: 0 10px;

					// justify-content: space-around;
					&:nth-child(1) {
						padding: 20px 10px 0;
					}
				}

				.ListOfPatientsBT_itemTwo_right {
					.ListOfPatientsBT_itemTwo_rightSJ {
						position: absolute;
						top: 4px;
						right: 0;
						width: 161px;
						height: 30px;
						z-index: 1;
					}

					.ZXImg {
						position: absolute;
						top: 0;
						right: 0;
						width: 182px !important;
						height: 40px !important;
					}
				}
			}

			.ListOfPatientsBT_center {
				background: #F6FEFF;
				border-radius: 6px;
				opacity: 0.95;
				margin: -9px 6px;
				padding: 10px;
				word-break: break-all;
				// display: flex;

				.center-title {
					position: absolute;
					width: 26px;
					height: 24px;
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 21px;
					background: #FF6E91;
					border-radius: 60%;
					text-align: center;
					margin-right: 5px;
				}
			}
		}

	}

	.listBtcss {
		height: calc(100% - 177px);
		overflow-y: scroll;
	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}

	::v-deep .u-form-item__body {
		padding: 0px 5px;
		margin-bottom: 15px;
	}

	::v-deep .u-border {
		border: none;
		background: #F6FEFF;
	}

	::v-deep .u-checkbox__icon-wrap--square {
		background: #CAF0F3 !important;
		border-radius: 2px !important;
		border: 2px solid #7AD9DF !important;
	}

	::v-deep .u-input {
		padding: 0 0 !important;
		width: 22px !important;
		height: 22px !important;
	}

	::v-deep .uni-input-input {
		background: #CAF0F3 !important;
		border-radius: 2px !important;
		border: 2px solid #7AD9DF !important;
	}

	::v-deep .uni-input-input {
		width: 81% !important;
		height: 18px !important;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2F7378 !important;
	}

	::v-deep .u-tabs__wrapper__nav {
		width: 100%;
	}

	::v-deep .uni-scroll-view-content {
		width: 100% !important;
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #7AD9DF;
	}

	::v-deep .Iage div {
		background-size: auto !important;
		background-position: 100% 0% !important;
	}

	::v-deep .u-radio-group--row {
		justify-content: space-around;
	}

	::v-deep .u-radio__icon-wrap--circle {
		width: 26px !important;
		height: 26px !important;
		background-color: rgb(122, 217, 223) !important;
	}

	.clao ::v-deep {
		.u-icon__icon {
			border-radius: 100%;
			background: #FEFF87;
			color: #FEFF87 !important;
			width: 13px;
			height: 13px;
			// font-size: 16px !important;
		}
	}

	.clat ::v-deep {
		.u-icon__icon {
			border-radius: 100%;
			background: #FFFFFF;
			// font-size: 16px !important;
			width: 13px;
			height: 13px;
		}
	}

	::v-deep uni-page-wrapper {
		background: #F9F9F9 !important;
	}

	::v-deep .u-radio-group--row {
		margin-top: 10px;
	}

	.btn {
		box-shadow: 0px 2px 6px 0px #ff6e91;
	}
</style>
